<template>
    <div id='container'></div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { Chart } from '@antv/g2'

let chart

onMounted(() => {
    chart = new Chart({
        container,
        autoFit: true,
    });
    chart
        .title('可交互柱形图')
        .interval()
        .data({
            type: 'fetch',
            value: '/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
        })
        .encode('x', 'letter')
        .encode('y', 'frequency')
        .axis('y', { labelFormatter: '.0%' })
        .state('selected', { fill: '#1783ff', stroke: 'black', strokeWidth: 1 })
        .state('unselected', { fill: '#ccc' })
        .interaction('elementSelect')

    chart.render();
});

// 销毁
onUnmounted(() => {
    chart.destroy();
    chart = null;
});
</script>

<style lang='less' scoped>
#container {
    width: 800px;
    height: 400px;
}
</style>